<article>
  <img
    class="listing-photo"
    [src]="housingLocation?.photo"
    alt="Exterior photo of {{ housingLocation?.name }}"
    crossorigin
  />
  <section class="listing-description">
    <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
    <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
  </section>
  <section class="listing-features">
    <h2 class="section-heading">About this housing location</h2>
    <ul>
      <li>Units available: {{ housingLocation?.availableUnits }}</li>
      <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
      <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
    </ul>
  </section>
  <section class="listing-apply">
    <h2 class="section-heading">Apply now to live here</h2>
    <form [formGroup]="applyForm" (submit)="submitApplication()">
      <label for="first-name">First Name</label>
      <input id="first-name" type="text" formControlName="firstName" />
      <label for="last-name">Last Name</label>
      <input id="last-name" type="text" formControlName="lastName" />
      <label for="email">Email</label>
      <input id="email" type="email" formControlName="email" />
      <button type="submit" class="primary">Apply now</button>
    </form>
  </section>
</article>
